import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
// 导入获取用户信息接口  && 购物车数据
import { getUserInfo, getCartList } from "../api";

export default new Vuex.Store({
  state: {
    // 初始化读取 sessionStorage中的信息
    token: sessionStorage.getItem('token') ? sessionStorage.getItem('token') : '',
    isToken: sessionStorage.getItem('isToken') ? sessionStorage.getItem('isToken') : false,
    // 新创建的vuex中state的userInfo为空， 由actives获取
    userInfo: null,
    carList: [],
    badeCount: 0,
    allChecked: false,
    // 选中商品总价格
    totalPrice: 0
  },
  getters: {
    getIsLogin(state) {
      // console.log('-------3------');
      // isToken没有改变的时候，事件不会触发
      return state.isToken
    },
    getUserInfo(state) {
      return state.userInfo
    },
    getBadgeCount(state) {
      return state.badeCount
    },
    // 获得购物车列表
    getCarData(state) {
      return state.carList
    },
    // 获得全选框的选中状态
    getAllChecked(state) {
      return state.allChecked
    },
    // 获得所有选中商品的价格
    getTotalPrice(state) {
      return state.totalPrice
    }

  },
  mutations: {
    setToken(state, paramt) {
      // console.log('-------1------');
      sessionStorage.setItem('token', paramt.token)
      sessionStorage.setItem('isToken', true)
      state.token = paramt.token
      // 发现设置token后没有设置isLogin的值
      state.isToken = true
      // console.log('-------2------');
    },
    setUserInfo(state, params) {
      state.userInfo = params
    },
    setCarData(state, params) {
      state.carList = params
    },
    setBadgeCount(state, paramt) {
      state.badeCount = paramt
    },
    // 设置全选框状态的方法
    setAllChecked(state, paramt) {
      state.allChecked = paramt
    },
    // 设置选中上坪的总价格
    setTotalPrice(state, paramt) {
      state.totalPrice = paramt
    }
  },
  actions: {
    // 在这里获取用户信息，顺便存进state中
    getInfo(content) {
      getUserInfo(res => {
        // 这里需要判断，请求是否成功
        // console.log('vuex中的acives中的属性执行：', content, res);
        content.commit('setUserInfo', res.data)
      })
    },
    // 获取购物车数据
    getCarData(content) {
      getCartList(res => {
        // 获得购物车的总数据量
        if (res.status == 0) {
          const list = res.data
          let coun = 0
          list.forEach(function (item) {
            // 得到商品的数量
            coun += item.count
            // 将购物车中的checked属性默认设置为false
            item.checked = false
          });
          content.commit('setBadgeCount', coun)
          console.log(coun);
          content.commit('setCarData', res.data)
        }

      })
    },
    // 处理购物车 选择框事件， 判断全选框是否选中
    changeChecked(content) {
      let allPrice = 0
      let checked = true
//  遍历出所有按钮的选中状态
      content.getters.getCarData.forEach(item => {
        console.log(item);
        if (!item.checked) {
          // 如果由一个没有选中，全选框也不选中
          checked = false
        }else {
          // 计算选中 商品的价格
          allPrice += item.price * item.count * 100
        }
      })
      content.commit('setAllChecked', checked)
      content.commit('setTotalPrice', allPrice)
    },
    // 点击全选按钮后，所有选择框置为  相同状态
    oppositeAll(content, paramt) {

      let arrCar = []
      let allPrice = 0
      content.getters.getCarData.forEach(item => {
        item.checked = paramt
        arrCar.push(item)
        // 以为单位缩小了100倍，所以要乘 100
        allPrice += item.price * item.count * 100
      })
      // 当选中所有商品后， 从新计算价格
      if (paramt) {
        // 设置商品总价格
        content.commit('setTotalPrice', allPrice)
      }else {
        content.commit('setTotalPrice', 0)
      }
      // 更改购物车列表
      content.commit('setCarData', arrCar)
    }

  },
});
